 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="style/first_css.css" type="text/css" rel="stylesheet" >
<script src="js/main.js"></script>
<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a.js"></script>
<script>
DD_belatedPNG.fix('*');
</script>
<![endif]-->
</head>
<body>
	<!-- 顶部 -->
	<div id="top">
	  	<ul class="top_menu">
		    <li><a href="javascript:;">Account Sign In</a></li>
		    <li><a href="javascript:;">Register</a></li>
		    <li><a href="javascript:;">Buyers Guide</a></li>
		    <li><a href="javascript:;">About</a></li>
		    <li><a href="javascript:;">Blog</a></li>
		    <li class="no_dot"><a href="javascript:;">Contact</a></li>
	  	</ul>
	  	<ul class="top_bar">
		    <li class="phone">123.456.7890</li>
		    <li class="help"><a href="javascript:;">Live Help</a></li>
		    <li class="language"><a href="javascript:;"><img src="images/Canada_ico.gif" alt="Canada" title="canada"></a></li><!-- title鼠标移上去会显示（鼠标提示符）-->
		    <li class="language"><a href="javascript:;"><img src="images/America_ico.gif" alt="America"></a></li>
	  	</ul>
	</div>

	<!-- 头部 -->
	<div id="header">
	  	<div id="shopping">
		    <a href="javascript:;"><img src="images/header_bag.png" alt="bag"></a>
		    <p>0 items in your bag</p>
		    <a id="check" href="javascript:;">Check Out</a>
	  	</div>
	  	<h1 title="Ecommerce Website" id="logo"><img src="images/Logo.png" alt="Logo"></h1>
	  	<div class="search">
	   		<form action="javascript:;">
		      	<input class="text" type="text" placeholder="Search website">
		      	<input class="btn" type="submit" value="&nbsp;">
	    	</form>
	  	</div>
	</div>

	<!-- 导航栏 -->
	<ul id="nav">
		  <li class="active"><a href="javascript:;"><strong><span>HOME</span></strong></a></li>
		  <li><a href="javascript:;"><strong><span>LATEST ARRIVALS</span></strong></a></li>
		  <li><a href="javascript:;"><strong><span>MEN'S</span></strong></a></li>
		  <li><a href="javascript:;"><strong><span>WOMEN'S</span></strong></a></li>
		  <li><a href="javascript:;"><strong><span>KIDS</span></strong></a></li>
		  <li><a href="javascript:;"><strong><span>BRANDS</span></strong></a></li>
		  <li><a href="javascript:;"><strong><span>SALE</span></strong></a></li>
		  <li><a href="javascript:;"><strong><span>GIFT CARDS</span></strong></a></li>
		  <li><a href="javascript:;"><strong><span>FREEBIES</span></strong></a></li>
	</ul>

	<!-- 主体 -->
	<div id="content">
	  	<!-- 头部内容 -->
	  	<div id="content_top">
	   	 	<div id="content_bottom">  
				<div id="ad">
					<ul>
					  	<li><a href="javascript:;"><img src="images/banner/1.png" alt="ad" ></a></li>
					</ul>
					<h2>PRODUCT TITLE</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit lacus dapibus ante mattis in adipiscing nibh placerat. Cras bibendum porta di1am, non dignissim sapien malesuada vitae.</p>
					<div class="bg"></div>
				</div>
			</div>
		</div>
	      	
	    <!-- 内容主体 -->
	    <div id="main" class="clear">
	      	<!-- 侧边栏 -->
	      	<div id="side">
	      		<!-- 侧边栏菜单 -->
	        	<div class="side_menu">
	          		<h2><strong><span>Browse Categories</span></strong></h2>
	          		<div class="list">
		            	<ul>
		                  	<li><a href="javascript:;">Lorem ipsum dolor sit </a></li>
		                  	<li><a href="javascript:;">Amet consectetur</a></li>
		                  	<li><a href="javascript:;">Adipiscin elit</a></li>
		                  	<li><a href="javascript:;">Cras suscipit lacus</a></li>
		                  	<li><a href="javascript:;">Dapibus ante mattis</a></li>
		                  	<li><a href="javascript:;">Adipiscing nibh placerat</a></li>
		                  	<li><a href="javascript:;">Cras bibendum</a></li>
		                  	<li><a href="javascript:;">Porta diam elit</a></li>
		                  	<li><a href="javascript:;">Adipiscing nibh placerat</a></li>
		                  	<li><a href="javascript:;">Cras bibendum</a></li>
		                  	<li><a href="javascript:;">Porta diam elit</a></li>
		            	</ul>
		            </div>
	          	</div>
				
				<!-- 侧边栏联系区 -->
		        <div class="join">
		          	<div class="join_t">
		            	<div class="join_b">
		              		<div class="join_form">
		                		<p>Join our newsletter list to get the latest updates</p>
		                		<form action="javascript:;">
		                  			<input class="join_text" type="text">
		                  			<input class="join_btn" type="submit" value="Join Now">
		                		</form>
		            		</div>  
		              		<ul class="contact">
		                		<li class="space1"><a href="javascript:;">Follow us on Twitter</a></li>
		                		<li class="space2"><a href="javascript:;">Become our fan on Facebook</a></li>
		                		<li class="space3"><a href="javascript:;">Connect with us on LinkedIn</a></li>
		                		<li class="space4"><a href="javascript:;">Send us your email enquiries</a></li>
		              		</ul>
		            	</div>
		          	</div>
		        </div>
		            
		        <!-- 侧边栏支付方式 -->
		        <div class="payment"><img src="images/payment.gif" alt="payment"></div>
	        </div>
 
	        <!-- 商品陈列 -->
	        <div id="wrap">
	        	<div id="sel" class="sort">
		        	<dl>
		        		<dt>Sort by:</dt>
		        		<dd>
		        			<h3>Ascending</h3>
		        			<a href="javascript:;"></a>
		        			<ul>
		        				<li>menu1</li>
		        				<li>menu2</li>
		        				<li>menu3</li>
		        			</ul>
		        		</dd>
		        		<dd>
		        			<h3>Product Name</h3>
		        			<a href="javascript:;"></a>
		        			<ul>
		        				<li>menu1</li>
		        				<li>menu2</li>
		        				<li>menu3</li>
		        			</ul>
		        		</dd>
		        		<dd>
		        			<h3>Brand Name</h3>
		        			<a href="javascript:;"></a>
		        			<ul>
		        				<li>menu1</li>
		        				<li>menu2</li>
		        				<li>menu3</li>
		        			</ul>
		        		</dd>
		        	</dl>
		        	<p>
	                    <strong>Items per page:</strong>
	                    <span>12</span> / <span>20</span> / <span class="color_style">30</span> / <span class="color_style">50</span>
	                </p>
				</div>

            	<!-- 商品列表 -->
                <div class="pic_list">
                	<h2>Our Products</h2>
                    <ul class="clear">
                    	<li>
                        	<a href="javascript:;"><img src="images/pic_list/1.jpg" alt="" /></a>
                            <h3>Product Name</h3>
                            <p>Price: <span>$12.99</span></p>
                        </li>
                    	<li>
                        	<a href="javascript:;"><img src="images/pic_list/2.jpg" alt="" /></a>
                            <h3>Product Name</h3>
                            <p>Price: <span>$12.99</span></p>
                        </li>
                    	<li>
                        	<a href="javascript:;"><img src="images/pic_list/3.jpg" alt="" /></a>
                            <h3>Product Name</h3>
                            <p>Price: <span>$12.99</span></p>
                        </li>
                    	<li>
                        	<a href="javascript:;"><img src="images/pic_list/4.jpg" alt="" /></a>
                            <h3>Product Name</h3>
                            <p>Price: <span>$12.99</span></p>
                        </li>
                    	<li>
                        	<a href="javascript:;"><img src="images/pic_list/1.jpg" alt="" /></a>
                            <h3>Product Name</h3>
                            <p>Price: <span>$12.99</span></p>
                        </li>
                    	<li>
                        	<a href="javascript:;"><img src="images/pic_list/2.jpg" alt="" /></a>
                            <h3>Product Name</h3>
                            <p>Price: <span>$12.99</span></p>
                        </li>
                    	<li>
                        	<a href="javascript:;"><img src="images/pic_list/3.jpg" alt="" /></a>
                            <h3>Product Name</h3>
                            <p>Price: <span>$12.99</span></p>
                        </li>
                    	<li>
                        	<a href="javascript:;"><img src="images/pic_list/4.jpg" alt="" /></a>
                            <h3>Product Name</h3>
                            <p>Price: <span>$12.99</span></p>
                        </li>
                    	<li>
                        	<a href="javascript:;"><img src="images/pic_list/1.jpg" alt="" /></a>
                            <h3>Product Name</h3>
                            <p>Price: <span>$12.99</span></p>
                        </li>
                    	<li>
                        	<a href="javascript:;"><img src="images/pic_list/2.jpg" alt="" /></a>
                            <h3>Product Name</h3>
                            <p>Price: <span>$12.99</span></p>
                        </li>
                    	<li>
                        	<a href="javascript:;"><img src="images/pic_list/3.jpg" alt="" /></a>
                            <h3>Product Name</h3>
                            <p>Price: <span>$12.99</span></p>
                        </li>
                    	<li>
                        	<a href="javascript:;"><img src="images/pic_list/4.jpg" alt="" /></a>
                            <h3>Product Name</h3>
                            <p>Price: <span>$12.99</span></p>
                        </li>
                    </ul>
                </div>

                <!-- 页码 -->
                <div class="page">
                    <a class="active" href="javascript:;">1</a>
                    <a href="javascript:;">2</a>
                    <a href="javascript:;">3</a>
                    <a href="javascript:;">4</a>
                    <a href="javascript:;">5</a>
                    <a href="javascript:;">NEXT <span>></span></a>
                    <a href="javascript:;">LAST <span>>></span></a>
                </div>
				
				<!-- 底部滚动图片 -->

				
				<div id="scroll_list">
                    <h2>FEATURED PRODUCTS</h2>
                    <div class="scroll_wrap">
                    	<div class="scroll_wrap_l">
                        	<div id="run1" class="scroll_wrap_r">
                            	<a class="prev" href="javascript:;"></a>
                            	<a class="next" href="javascript:;"></a>
                                <div class="list_wrap">
                                	<ul>
                                    	<li>
                                        	<a href="#"><img src="images/scroll_pic/1.jpg" alt="" /></a>
                                            <p>Elegant MP3 player skin PSD download</p>
                                        </li>
                                    	<li>
                                        	<a href="#"><img src="images/scroll_pic/2.jpg" alt="" /></a>
                                            <p>Download shopping bag & icons (PSD & PNG)</p>
                                        </li>
                                    	<li>
                                        	<a href="#"><img src="images/scroll_pic/3.jpg" alt="" /></a>
                                            <p>High resolution abstract bokeh background</p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
	        </div>         
	    </div>
	</div>

	<!-- 脚注 -->
	<div id="footer">
	    <div id="footer_info">
	        <p class="ico1">Shop online with us safely & securely</p>
	        <p class="ico2">We ship your orders anywhere!</p>
	        <div class="search">
	            <form action="#">
	                <input id="text2" class="text" type="text" placeholder="Search website" />
	                <input class="btn" type="submit" value="" />
	            </form>
	        </div>
	    </div>
	    <div id="footer_link">
	    	<dl>
	        	<dt>Company</dt>
	            <dd><a href="#">Home</a></dd>
	            <dd><a href="#">About Us</a></dd>
	            <dd><a href="#">Blog</a></dd>
	            <dd><a href="#">Latest News</a></dd>
	            <dd><a href="#">Login</a></dd>
	            <dd><a href="#">Join Us</a></dd>
	        </dl>
	    	<dl class="pos">
	        	<dt>Categories</dt>
	            <dd><a href="#">Lorem ipsum dolor sit</a></dd>
	            <dd><a href="#">Amet consectetur</a></dd>
	            <dd><a href="#">Adipiscin elit</a></dd>
	            <dd><a href="#">Cras suscipit lacus</a></dd>
	            <dd><a href="#">Dapibus ante mattis</a></dd>
	            <dd><a href="#">Adipiscing nibh placerat</a></dd>
	        </dl>
	    	<dl>
	        	<dt>Information</dt>
	            <dd><a href="#">My Account</a></dd>
	            <dd><a href="#">Rewards</a></dd>
	            <dd><a href="#">Terms & Conditions</a></dd>
	            <dd><a href="#">Buying Guide</a></dd>
	            <dd><a href="#">FAQ</a></dd>
	        </dl>
	    	<dl>
	        	<dt>Social Network</dt>
	            <dd><a href="#">My Account</a></dd>
	            <dd><a href="#">Rewards</a></dd>
	            <dd><a href="#">Terms & Conditions</a></dd>
	            <dd><a href="#">Buying Guide</a></dd>
	            <dd><a href="#">FAQ</a></dd>
	        </dl>
	    	<dl>
	        	<dt>Contact Us</dt>
	            <dd><a href="#">Phone: 1.234.567.8901</a></dd>
	            <dd><a href="#">Toll-Free: 1.234.567.8901</a></dd>
	            <dd><a href="#">Fax: 1.234.567.8901</a></dd>
	            <dd><a href="#">Email:<span>Send us an email</span></a></dd>
	            <dd class="space"><a href="#">MON - SAT 9am to 7:30pm</a></dd>
	            <dd><a href="#">Sundays, holidays closed</a></dd>
	        </dl>
	    </div>
	</div>
	
</body>
</html>
